<template>
  <div style="padding-bottom: 10px;padding-top:10px">
    <span style="margin-left: 10px;"> 年：</span>
    <a-dropdown  :trigger="['click']">
        <template #overlay>
          <a-menu @click="changeYear">
            <a-menu-item  v-for="(item,i) in yearList" :key="i">
              {{item}}
            </a-menu-item>
          </a-menu>
        </template>
        <a-button class="mytbn">
          {{year}}
          <DownOutlined />
        </a-button>
    </a-dropdown>
  </div>
    
    <div style="background-color: #ececec; padding: 20px" class="mycard">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-card title="投标数据分析" :bordered="false">
            <div class="echart-pic">
              <a-spin :spinning="echar1Loading"/>
              <div  class="about main" id="main1"></div>
            </div>
          </a-card>
        </a-col>
      </a-row>
      
    </div>
   
    
      
</template>
<script>
import {request} from "../../utils/request";
import { DownOutlined } from '@ant-design/icons-vue';
const yearList = ['2021','2022','2023','2024','2025','2026','2027','2028','2029','2030'];
const year = new Date().getFullYear();

export default {
  data() {
       return {
          yearList,
          year,
          echar1Loading: true,
       }
  },
  mounted() {
       this.echart1();
  },
  methods:{  
    echart1() {
      const person = []; //部门
      const tbnumber = []; //投标数
      const zbnumber = []; //中标数
      const zblv = []; //中标率
     
      // const score = [];
      
       request({ 
          url: `/api/xs/tb?year=${this.year}`,
          method: "get",
        }).then((res)=>{
          res.forEach(e => {
            person.push(e.deptname);
            tbnumber.push(e.tbnumber);
            zbnumber.push(e.zbnumber);
            zblv.push(e.successrate)
          });
          this.echar1Loading = false;
          
          // 基于准备好的dom，初始化echarts实例
          var myChart1 = this.$echarts.init(document.getElementById("main1"));
          // 绘制图表
          myChart1.setOption({
            tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
              color: '#999'
              }
            }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['投标数量', '中标个数', '成功率']
            },
            xAxis: [
              {
                type: 'category',
                data: person,
                axisPointer: {
                  type: 'shadow'
                },
                
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '数量',
                // min: 0,
                // max: 31,
                interval: 5,
                splitLine:{
                  show:false
                },
                axisLabel: {
                  formatter: '{value}'
                },
              },
              {
                type: 'value',
                name: '成功率',
                // min: 0,
                // max: 200,
                interval: 10,
                show:true,
              
                axisLabel: {
                  formatter: '{value}'
                }
              }
            ],    
            series: [
                  {
                    name: '投标数量',
                    type: 'bar',
                    label:{
                      normal:{
                        show: true
                      }
                    },
                    data: tbnumber
                  },
                  {
                    name: '中标个数',
                    type: 'bar',
                    label:{
                      normal:{
                        show: true
                      }
                    },
                    data: zbnumber
                  },
                  {
                    name: '成功率',
                    type: 'line',
                    label:{
                      normal:{
                        show: true
                      }
                    },
                    yAxisIndex: 1,
                    data: zblv
                  }
                ]
            });
      })
 
    },
    changeYear(e) {
      this.year = this.yearList[e.key]
      this.echart1();
    },
  },
  
  components: {
    DownOutlined,
  },
}
</script>
<style lang="scss" scoped>
 :deep(.ant-dropdown-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}
.ant-dropdown-menu {
   height: 150px;
   overflow: auto;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  padding: 5px 0;
}
.main {
  height: 400px;
  width: 100%;
}
.echart-pic {
  height: 400px;
  width: 100%;
  line-height: 400px;
  text-align: center;
  overflow: hidden;
}
.mycard .ant-col { 
  margin-bottom: 10px;
}
</style>
